<template>
  <div class="main">
    <div class="wrapper">
      <div class="container">
        <header-components :status="2"></header-components>
        <div class="process-body">
          <div class="process-list">
            <header class="row">
              <span>UID</span>
              <span>PID</span>
              <span>PPID</span>
              <span>C</span>
              <span>STIME</span>
              <span>TTY</span>
              <span>TIME</span>
              <span class="flex3">CMD</span>
              <span class>操作</span>
            </header>
            <ul>
              <li class="row" v-for="(item, i) in processSet" :key="i">
                <span>{{item.uid}}</span>
                <span>{{item.pid}}</span>
                <span>{{item.ppid}}</span>
                <span>{{item.c}}</span>
                <span>{{item.stime}}</span>
                <span>{{item.tty}}</span>
                <span>{{item.time}}</span>
                <span class="flex3">{{item.cmd}}</span>
                <span class>
                  <button @click="stopProcess(item.pid)" :data-pid="item.pid" class="stop-btn">终止</button>
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerComponents from "../components/headerNav.vue";
import api from "../apis/process";
export default {
  data() {
    return { processSet: [] };
  },
  components: {
    headerComponents
  },
  mounted() {
    setInterval(() => {
      api.listProcess().then(res => {
        this.processSet = res.data;
      });
    }, 2000);
  },
  methods: {
    stopProcess(pid) {
      api.stopProcess(pid).then(res => {
        this.$toast("提示", res.msg, i => {});
      });
    }
  }
};
</script>

<style lang="less" >
@import url("../style/less/base.less");
@import url("../style/less/index.less");
@import url("../style/less/process.less");
</style>